<template>
    <div class="common_page">
        <div class="main_content" ref="mainContent">
            <el-card class="main-card" shadow="never">
                <el-form :model="searchData" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom: -20px">
                    <el-form-item label="任务编号" prop="number">
                        <el-input placeholder="请输入内容" v-model="searchData.number"></el-input>
                    </el-form-item>
                    <el-form-item label="任务名称" prop="name">
                        <el-input placeholder="请输入内容" v-model="searchData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="任务分类" prop="classifyName">
                        <el-input placeholder="请输入内容" v-model="searchData.classifyName"></el-input>
                    </el-form-item>
                    <el-form-item label="执行人" prop="executor">
                        <el-input placeholder="请输入内容" v-model="searchData.executor"></el-input>
                    </el-form-item>
                    <el-form-item label="执行时间" prop="executorDate">
                        <el-date-picker v-model="searchData.executorDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="" prop="templateNumber">
                        <el-button v-hasPermi="['productManage:taskManage:query']" type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-toolbar mb8 flex-between" style="margin-top: 20px; width: 100%">
                    <el-button v-hasPermi="['productManage:taskManage:add']" type="primary" icon="el-icon-plus" size="mini" @click="addNew">新增</el-button>
                    <div>
                        <el-tooltip class="item" effect="dark" content="重置" placement="top">
                            <el-button size="mini" circle icon="el-icon-refresh" v-hasPermi="['productManage:taskManage:query']" @click="resetFields" />
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="导出" placement="top">
                            <el-button size="mini" circle icon="el-icon-download" v-hasPermi="['productManage:taskManage:export']" @click="handleExport" />
                        </el-tooltip>
                    </div>
                </div>

                <div class="page_content" style="width: 100%">
                    <div class="page_content_bottom">
                        <sysTable
                            :data="setTableData"
                            :columns="setTableColumns"
                            :curr-page="searchData.currPage"
                            :total-page="pageTotal"
                            :page-size="searchData.pageSize"
                            @sizeChange="sizeChange"
                            @currentChange="currentChange"
                        >
                            <template #state="scope">
                                <div :class="jumpClass(scope.scope.row.state)">{{ jumpState(scope.scope.row.state) }}</div>
                            </template>
                            <template #operation="scope">
                                <el-button v-hasPermi="['productManage:taskManage:edit']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-edit" @click="showEdit(scope.scope.row)">编辑</el-button>
                                <el-button v-hasPermi="['productManage:taskManage:detail']" size="small" type="primary" plain style="padding: 5px" icon="el-icon-view" @click="showDetail(scope.scope.row)">详情</el-button>
                            </template>
                        </sysTable>
                    </div>
                </div>
            </el-card>
            <el-dialog :title="addOrEditTitle" :visible.sync="addOrEditDialog" width="748px" append-to-body>
                <el-form ref="form" :model="formData" label-width="90px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="任务标题:" prop="name">
                                <el-input v-model="formData.name" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="任务分类:" prop="classifyId">
                                <el-select v-model="formData.classifyId" style="width: 265px" clearable placeholder="请选择">
                                    <el-option v-for="item in problemLists" :key="item.id" :label="item.name" :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="执行时间:" prop="executorDate">
                                <el-date-picker v-model="formData.executorDate" style="width: 265px" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="指定处理人:" prop="deptId">
                                <div class="form_row">
                                    <el-select v-model="formData.deptId" clearable @change="getDeptPerson" style="width: 265px" placeholder="请选择">
                                        <el-option v-for="item in deptLists" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
                                    </el-select>
                                    <el-select v-model="formData.executor" clearable style="width: 265px" placeholder="请选择">
                                        <el-option v-for="item in personList" :key="item.userId" :label="item.nickName" :value="item.userId" />
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="关联事件:" prop="eventType">
                                <div class="form_row">
                                    <el-select v-model="formData.eventType" clearable style="width: 265px" placeholder="请选择">
                                        <el-option v-for="item in taskDropList" :key="item.id" :label="item.name" :value="item.id" />
                                    </el-select>
                                    <el-input v-model="formData.eventNumber" placeholder="请输入" style="width: 265px" />
                                </div>
                            </el-form-item>
                        </el-col>

                        <el-col>
                            <el-form-item label="物料:" prop="remark">
                                <div class="form_segment" v-for="(item, index) in formData.materialList" :key="index">
                                    <el-image style="width: 20px; height: 20px; cursor: pointer" :src="bitchDel" @click="delSegment(index)" fit="fill"></el-image>
                                    <div class="form_segment_data">
                                        <el-form ref="form" :model="formData" label-width="100px">
                                            <el-col :span="12">
                                                <el-form-item label="物料类型:" label-width="90px" prop="materialId">
                                                    <el-select v-model="item.materialId" clearable style="width: 200px" placeholder="请选择">
                                                        <el-option v-for="item in materialTypeList" :key="item.id" :label="item.number" :value="item.id" />
                                                    </el-select>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="" label-width="23px" prop="orderNumber">
                                                    <el-input v-model="item.materialCount" style="width: 265px" clearable placeholder="请输入内容" />
                                                </el-form-item>
                                            </el-col>
                                        </el-form>
                                    </div>
                                </div>
                                <div class="form_add" @click="addSegment">
                                    <el-image style="width: 20px; height: 20px" :src="bitchAdd" fit="fill"></el-image>
                                    <div class="form_add_tips">继续添加</div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="问题描述:" prop="remark">
                                <el-input v-model="formData.remark" type="textarea" rows="2" placeholder="请输入备注" />
                                <!-- <el-input v-model="formData.price"  placeholder="请输入单价" style="width:265px;" /> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="图片:" prop="supplierName">
                                <!-- <div>最多可添加6张</div> -->
                                <ImageUpload v-if="addOrEditDialog" :value="conversionUrl(formData.pictureList)" uploadAction="production/dispatchList/upload" @input="getImagePath($event)"></ImageUpload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-if="addOrEditTitle == '编辑'" class="edit_doalog">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="生产状态:" prop="state">
                                    <el-radio-group v-model="formData.state">
                                        <el-radio :label="1">待生产</el-radio>
                                        <el-radio :label="2">生产中</el-radio>
                                        <el-radio :label="3">已完成</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">提 交</el-button>
                </div>
            </el-dialog>
            <el-dialog title="详情" class="detail_dialog" :visible.sync="detailDialog" width="700px" append-to-body>
                <el-form ref="form" :model="formData" label-width="90px">
                    <!-- <div style="opacity: 0;">1</div> -->

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="任务标题:" prop="title">
                                <div class="detail_info">{{ formData.name }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="任务分类:" prop="matterType">
                                <div class="detail_info">{{ formData.classifyName }}</div>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="24">
              <el-form-item label="创建人:" prop="matterType">
                <div class="detail_info">{{ formData.createdBy }}</div>
              </el-form-item>
            </el-col> -->
                        <el-col :span="24">
                            <el-form-item label="指定处理人:" prop="deptId">
                                <div class="detail_info">{{ formData.deptName }} - {{ formData.executorName }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="关联事件:" prop="type">
                                <div class="detail_info">{{ formData.eventTypeName }} - {{ formData.eventNumber }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="物料:" prop="type">
                                <div class="detail_info" v-for="(item, index) in formData.materialList" :key="index">{{ item.name }} - {{ item.materialCount }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="执行时间:" prop="type">
                                <div class="detail_info">{{ formData.executorDate }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="状态:" prop="matterDescribe">
                                <!-- <div class="detail_info">{{  }}</div> -->
                                <div class="special_info" :class="jumpClass(formData.state)">
                                    {{ jumpState(formData.state) }}
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="问题描述:" prop="remark">
                                <div class="detail_info">{{ formData.remark }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="图片:" prop="supplierName">
                                <!-- <div>最多可添加6张</div> -->
                                <div class="dialog_img_list">
                                    <el-image v-for="(item, index) in formData.pictureList" :key="index" style="width: 116px; height: 116px; margin: 0 8px 0px 0px" :src="uploadImgUrl + item.imgUrl" fit="fill"></el-image>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="cancel">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { addTaskInfo, detailTaskInfo, editTaskInfo, getMaterialClassifica, getProblemlist, getTaskList, taskDropDown } from '../api/product/index';
import { listDept, listPerson } from '@/api/system/dept';
import sysTable from '../components/SysTable';

export default {
    name: 'equipmentEnergy',
    components: {
        sysTable,
    },
    data() {
        return {
            searchData: {
                pageSize: 10,
                currPage: 1,
                number: '',
                name: '',
                classifyName: '',
                executor: '',
                executorDate: '',
            },
            setTableData: [],
            pageTotal: 0,
            setTableColumns: [
                {
                    label: '任务编号',
                    prop: 'number',
                    minWidth: '180',
                    align: 'center',
                    fixed: 'left',
                    showOverflowTooltip: true,
                },
                {
                    label: '任务名称',
                    prop: 'name',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '任务分类',
                    prop: 'classifyName',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '执行人',
                    prop: 'executorName',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '执行时间',
                    prop: 'executorDate',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '任务描述',
                    prop: 'remark',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '状态',
                    prop: 'state',
                    width: '180',
                    align: 'center',
                    showOverflowTooltip: true,
                },
                {
                    label: '操作',
                    prop: 'operation',
                    minWidth: '120',
                    fixed: 'right',
                    align: 'center',
                },
            ],
            materialTypeList: [],
            problemLists: [],
            personList: [],
            deptLists: [],
            taskDropList: [],
            orderTypeList: [],
            buttonLoading: false,
            formData: {
                name: '',
                classifyId: '',
                executor: '',
                deptId: '',
                executorDate: '',
                remark: '',
                eventType: '',
                eventNumber: '',
                materialList: [
                    {
                        materialId: '',
                        materialCount: '',
                    },
                ],
                state: 1,
                pictureList: [],
            },
            bitchAdd: require('../images/bitchAdd.png'),
            bitchDel: require('../images/bitchDel.png'),
            addOrEditTitle: '新增',
            addOrEditDialog: false,
            detailDialog: false,
            uploadImgUrl: process.env.VUE_APP_BASE_API,
            statusList: [
                { id: 1, name: '已提交' },
                { id: 2, name: '未指派' },
                { id: 3, name: '未接单' },
                { id: 4, name: '处理中' },
                { id: 5, name: '未确认' },
                { id: 6, name: '已确认' },
                { id: 7, name: '已驳回' },
            ],
        };
    },
    mounted() {
        this.getPageList();
        this.getMaterialClassifica();
        this.getProblemlist();
        this.getDeptList();
        this.getTaskDropDown();
    },
    methods: {
        search() {
            this.buttonLoading = true;
            this.searchData.currPage = 1;
            this.getPageList();
        },
        resetFields() {
            this.searchData = {
                pageSize: 10,
                currPage: 1,
                number: '',
                name: '',
                classifyName: '',
                executor: '',
                executorDate: '',
            };
            this.search();
        },
        sizeChange(val) {
            this.searchData.pageSize = val;
            this.getPageList();
        },
        currentChange(val) {
            this.searchData.currPage = val;
            this.getPageList();
        },
        getPageList() {
            getTaskList(this.searchData)
                .then((res) => {
                    this.setTableData = res.data.list;
                    this.pageTotal = res.data.total || 0;
                    this.buttonLoading = false;
                })
                .finally(() => {
                    this.buttonLoading = false;
                });
        },
        getProblemlist() {
            getProblemlist().then((res) => {
                this.problemLists = res || [];
            });
        },
        getTaskDropDown() {
            taskDropDown().then((res) => {
                this.taskDropList = res.data || [];
            });
        },
        getDeptList() {
            const obj = {};
            listDept(obj).then((res) => {
                this.deptLists = res.data || [];
            });
        },
        getDeptPerson(val) {
            listPerson(val).then((res) => {
                this.personList = res.data || [];
                console.log(this.personList, '333');
            });
        },
        getImagePath(val) {
            var arr = val.split(',') || [];
            this.formData.pictureList = [];
            arr.map((item) => {
                const obj = {
                    imgUrl: item,
                };
                this.formData.pictureList.push(obj);
            });
        },
        conversionUrl(val) {
            if (val) {
                var urls = '';
                val.map((item, index) => {
                    if (val.length == index + 1) {
                        urls = urls + item.imgUrl;
                    } else {
                        urls = urls + item.imgUrl + ',';
                    }
                });
                return urls;
            }
        },
        delSegment(val) {
            if (this.addOrEditTitle == '详情') {
                return;
            }
            if (this.formData.materialList.length > 1) {
                this.formData.materialList.splice(val, 1);
            } else {
                this.$message('最少要有一条物料');
            }
        },
        addSegment() {
            this.formData.materialList.push({
                materialId: '',
                materialCount: '',
            });
        },

        handleExport() {
            this.buttonLoading = true;
            var datas = {
                number: this.searchData.number,
                name: this.searchData.name,
                classifyName: this.searchData.classifyName,
                executor: this.searchData.executor,
                executorDate: this.searchData.executorDate,
                pageSize: '',
                currPage: '',
            };
            const obj = JSON.parse(JSON.stringify(datas));
            this.download(
                'production/stationRecordsByReport',
                {
                    ...obj,
                },
                '工位记录.xlsx'
            );
            this.buttonLoading = false;
            // exportBuild(obj).then(res=> {
            //   const fileName = '设备能源监控记录.xlsx'
            //   saveExcel(res.data, fileName)
            // })
        },
        addNew() {
            this.cancel();
            this.addOrEditTitle = '新增';
            this.addOrEditDialog = true;
        },
        showDetail(val) {
            detailTaskInfo(val.id).then((res) => {
                if (res.code == 200) {
                    this.formData = res.data;
                    this.detailDialog = true;
                } else {
                    this.$message.error('详情获取失败');
                }
            });
        },
        showEdit(val) {
            detailTaskInfo(val.id).then((res) => {
                console.log(res, '333');
                if (res.code == 200) {
                    this.formData = res.data;
                    if (this.formData.deptId) {
                        this.getDeptPerson(this.formData.deptId);
                    }
                    this.addOrEditTitle = '编辑';
                    this.addOrEditDialog = true;
                } else {
                    this.$message.error('详情获取失败');
                }
            });
        },
        cancel() {
            this.addOrEditDialog = false;
            this.detailDialog = false;
            this.formData = {
                name: '',
                classifyId: '',
                executor: '',
                deptId: '',
                executorDate: '',
                remark: '',
                eventType: '',
                eventNumber: '',
                materialList: [
                    {
                        materialId: '',
                        materialCount: '',
                    },
                ],
                state: 1,
                pictureList: [],
            };
        },
        submitForm() {
            if (this.addOrEditTitle == '新增') {
                addTaskInfo(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.cancel();
                        this.getPageList();
                        this.addOrEditDialog = false;
                    } else {
                        this.$message.error('新增失败，请联系管理员');
                    }
                });
            } else {
                editTaskInfo(this.formData).then((res) => {
                    if (res.code == 200) {
                        this.cancel();
                        this.getPageList();
                        this.addOrEditDialog = false;
                    } else {
                        this.$message.error('编辑失败，请联系管理员');
                    }
                });
            }
        },
        getMaterialClassifica() {
            getMaterialClassifica().then((res) => {
                this.materialTypeList = res.data.list || [];
                console.log(this.materialTypeList, '2222');
            });
        },
        jumpState(val) {
            switch (val) {
                case 1:
                    return '待处理';
                case 2:
                    return '处理中';
                case 3:
                    return '已完成';
                default:
                    return '-';
            }
        },
        jumpClass(val) {
            switch (val) {
                case 1:
                    return 'waits';
                case 2:
                    return 'processs';
                case 3:
                    return 'completes';
                default:
                    return '-';
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.common_page {
    height: 100%;
    width: 100%;
    background: #f3f4f5;
    overflow: auto;
}

.main_content {
    padding: 16px 20px;
}

::v-deep.el-card {
    border-radius: 8px;
}

.page_content {
    background: #fff;
    padding-bottom: 30px;
    box-sizing: border-box;
    padding: 20px 20px 30px 20px;
    border-radius: 8px;

    .page_content_head {
        display: flex;
    }
}

::v-deep.sys_table {
    .tableHeaderRow {
        cursor: pointer;

        .tableHeaderCell:active {
            opacity: 0.6;
        }

        .tableHeaderCell:last-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:first-of-type:active {
            opacity: 1;
        }

        .tableHeaderCell:last-of-type {
            cursor: default;
        }

        .tableHeaderCell:first-of-type {
            cursor: default;
        }
    }
}

.ope_btn {
    width: 44px;
    height: 28px;
    line-height: 28px;
    color: #3399ff;
    font-size: 14px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 85, 255, 0.5);
    padding: 0px;
}

.del_btn {
    width: 44px;
    height: 28px;
    background: #ffffff;
    line-height: 28px;
    color: #ff4c4d;
    font-size: 14px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(255, 76, 77, 0.5);
    padding: 0px;
}

.processs {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(255, 119, 51, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #ff7733;
    font-size: 14px;
    margin: 0 auto;
}

.waits {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(51, 153, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #3399ff;
    font-size: 14px;
    margin: 0 auto;
}

.completes {
    width: 58px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: rgba(0, 178, 74, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #00b24a;
    font-size: 14px;
    margin: 0 auto;
}

.form_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form_segment {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .form_segment_data {
        flex: 1;
        margin-left: 20px;

        ::v-deep.el-form {
            .el-form-item {
                margin-bottom: 0px;

                .el-form-item__label {
                    text-align: left;
                    color: #666;
                    font-size: 14px;
                    font-weight: 400;
                }
            }
        }
    }
}

.form_add {
    display: flex;
    align-items: center;
    cursor: pointer;

    .form_add_tips {
        font-weight: 500;
        color: #3399ff;
        line-height: 20px;
        font-size: 14px;
        margin-left: 20px;
    }
}

.detail_info {
    font-size: 14px;
    line-height: 20px;
    color: #333;
}

.detail_dialog {
    ::v-deep.el-form {
        .el-form-item {
            margin-bottom: 20px;

            .el-form-item__label {
                line-height: 20px;
                text-align: left;
                color: #666;
                font-size: 14px;
                font-weight: 400;
            }
        }
    }
}

.special_info {
    height: 20px;
    line-height: 20px;
    margin: 0px 0px;
}
</style>
